<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素的盒模型</title>
    <style>
        /*2023-1-12：第一遍理解记忆*/
        .s1{
            /*
            1、宽度和高度：行内元素不支持设置宽度和高度*/
            width:100px;
            height:100px;
            background-color: aqua;
            /*2、padding:行内元素可以设置padding,但是垂直方向的padding不会影响页面的布局*/
            /* padding:100px; */
            /*3、border：行内元素可以设置border,但是垂直方向的border不会影响页面的布局*/
            /* border:1px red; */
            /*4、margin：行内元素可以设置margin,但是垂直方向的margin不会影响页面的布局*/
            margin:100px;
        }
        .box1{
            width:200px;
            height:200px;
            background-color: chartreuse;
        }
        /*a是行内元素*/
        /*5、display属性
        （1）作用：设置元素的显示类型
        （2）可选值：
        inline：将元素设置为行内元素
        block：将元素设置为块元素
        inline-block：将元素设置为行内块元素：既可以设置宽度和高度，但不会独占一行
        table：将元素设置为一个表格
        none(元素不在页面中显示）
        6、visibility属性
        （1）作用：设置元素的显示状态
        （2）可选值：
        visible 默认值，元素在页面中正常显示
        hidden 元素在页面中隐藏不显示，但是依然占据页面的位置
        */
        a{
            display: inline-block;
            visibility:hidden;
            width:50px;
            height:50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <a href="javascript:;">超链接</a>
    <a href="javascript:;">超链接</a>
    <span class="s1">我是span</span>
    <span class="s1">我是span</span>
    <div class="box1"></div>
    
</body>
</html>